<template>
  <el-input style="position: absolute; top: 100px; left: 370px; width: 500px;" v-model="search_input" placeholder="请输入内容"></el-input>
  <el-button type="primary" style="position: absolute; top: 100px; left: 870px;" @click="search">搜索</el-button>
  <div style="position: absolute; top: 150px; left: 370px; width: 500px; height: 500px;">
    <li v-for="(item, key) in search_list" :key="key" style="">
      <a>{{item.name}}</a>
    </li>
    <el-pagination background layout="prev, pager, next" :page-size="query.size" @current-change="pagechange"  :total="query.total" />
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";
  import http from "../http"

  const route = useRoute()
  const router = useRouter()

  let last_search = route.query.search_input

  let search_input = ref("")

  let search_list = ref([])

  let query = ref({
    total: "",
    page: 1,
    size: 2,
  })

  const search = () => {
    axios.get(`http://127.0.0.1:8000/homepage/elsearch/?match=${search_input.value}&page=${query.value.page}`)
    .then(res=>{
      console.log(res)
      console.log(query.value.page)
      query.value.total = res.data.total
      search_list.value = res.data.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  const pagechange = (num) => {
    query.value.page = num
    search()
  }

  onMounted(() => {
    axios.get(`http://127.0.0.1:8000/homepage/elsearch/?match=${last_search}page=1`)
    .then(res=>{
      console.log(res)
      query.value.total = res.data.total
      search_list.value = res.data.data
      search_input.value = last_search
    })
    .catch(error=>{
      console.log(error)
    })
  })

</script>